<template>
  <!-- 推荐课程--------------------------------------  p2------------------------------------------------ -->
  <div class="container-homework">
    <!-- 筛选搜索 -->
    <div class="screen">
      <div class="tworow">
        <div class="twoleft">
          <div class="change_type_box">
            <el-select
              class="change_select1"
              v-model="search.type"
              placeholder="请选择类型"
            >
              <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
            </el-select>
            <p></p>
            <el-input
              v-model="search.about_text"
              placeholder="请输入相关内容"
              clearable
              class="change_input2"
            ></el-input>
          </div>
          <el-input
            v-model="search.work_text"
            placeholder="请输入合作方名称"
            clearable
            class="change_input1"
          ></el-input>
          <el-button>搜索</el-button>
        </div>

        <div class="tworight">
          <el-button>重置搜索</el-button>
          <el-button>导出列表</el-button>
        </div>
      </div>
    </div>
    <!-- 内容列表 -->
    <el-divider></el-divider>
    <div class="conList">
      <div class="conHeader">
        <div>当前结果：<span>总击 164 条记录</span></div>
        <el-select
          v-model="search.custom"
          class="zidingyi"
          placeholder="自定义显示列"
        >
          <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
        </el-select>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="q_weight" label="权重" width="80">
        </el-table-column>
        <el-table-column prop="class_name" label="课程名称" width="120">
        </el-table-column>
        <el-table-column prop="friend" label="合作方"> </el-table-column>
        <el-table-column prop="buy_num" label="购买(个数)"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="right_time" label="有效期"> </el-table-column>
        <el-table-column prop="class_type" label="课程类型"> </el-table-column>
        <el-table-column prop="old_price" label="原价"> </el-table-column>
        <el-table-column prop="new_price" label="售价"> </el-table-column>

        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
            <el-select
              v-model="operVal"
              @change="change(scope.row.id)"
              placeholder="操作"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background layout="total, prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homework-sup',
  data() {
    return {
      search: {
        type: '', //类型
        about_text: '', //相关内容
        work_text: '' //合作方内容
      },
      // 分页
      total: 1000,
      // 列表数据
      tableData: [{
        q_weight: '10', //权重
        class_name: '数学', //课程名称
        friend: '腾讯', //合作方
        buy_num: '100个',  //购买(个数)
        status: '完成',  //状态
        right_time: '10个月',  //有效期
        class_type: '数学',  //课程类型
        old_price: '100', //原价
        new_price: '90', //售价

        // operation: '操作'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '上架'
      }],
      // operVal
      operVal: ''
    }
  },
  created() {
    this.getWorkTable()
  },
  methods: {
    change(id) {
      if (this.operVal === '2') {
        // 上架
        this.operVal = ''
      } else {
        this.operVal = ''
      }
    },
    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageTimetable'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 2,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  padding: 0;
}
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        display: flex;
        align-items: center;
        .change_type_box {
          display: flex;
          align-items: center;
          background-color: #f7fbfc;
          border-radius: 0.0521rem;
          padding: 0.0573rem 0.0521rem;
          margin-right: 0.1042rem;
          .change_select1 {
            width: 0.8rem;
            font-size: 0.0729rem;
          }
          .change_input2 {
            width: 1rem;
          }
          /deep/ .el-input--medium .el-input__inner {
            color: #000;
            font-size: 0.0729rem;
            border: none;
            background-color: #f7fbfc;
            height: 0.1042rem;
            line-height: 0.1042rem;
          }
          /deep/ input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #888888;
            font-size: 0.0729rem;
          }
          /deep/.el-input--medium .el-input__icon {
            line-height: 0.1042rem;
          }
          > p {
            width: 0.0052rem;
            height: 0.0885rem;
            background-color: #dae2e4;
          }
        }
        .change_input1 {
          width: 1.5rem;
          border-radius: 0.0521rem;
          overflow: hidden;
          margin-right: 0.1042rem;
        }
        /deep/ .el-input--medium .el-input__inner {
          color: #000;
          font-size: 0.0729rem;
          border: none;
          background-color: #f7fbfc;
          height: 0.2188rem;
          line-height: 0.2188rem;
        }
        /deep/ input::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #888888;
          font-size: 0.0729rem;
        }

        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        .el-button {
          width: 0.7rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
        }

        .el-button:nth-child(2) {
          background-color: #0fdd8d;
          color: #fff;
        }
      }
    }
  }
  // 内容列表
  .conList {
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
    }
    .el-table {
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
